<template>
	<view class="details bg_color pdd_bottom2">
		<view v-if="!isEnter && !isDelete">
			<view class="tit">
				<view class="text">房屋信息</view>
			</view>
			<Details :detalisData="detalisData" :detalisList="detalisList"></Details>
				<view class="tit">
					<view class="text">业主信息</view>
				</view>
				<Details :detalisData="detalisData" :detalisList="detalisList1"></Details>
			<view v-if="detalisData.custodianName">
				<view class="tit">
					<view class="text">托管人信息</view>
				</view>
				<Details :detalisData="detalisData" :detalisList="detalisList3"></Details>
			</view>
			<view class="tit" v-if="detalisData.reportStatus == 1 || (store.isFuJing() && !store.isMe(detalisData.userId))">
				<view class="text">核查结果</view>
				<view class="xing" v-if="!detalisData.reportStatus">*</view>
			</view>
			<Form
				v-if="detalisData.reportStatus == 0 && store.isFuJing() && !store.isMe(detalisData.userId)"
				ref="formRef"
				:formList="formList"
				:formData="detalisData.verifyInfos"
			></Form>
			<Details
				v-if="detalisData.verifyInfos && detalisData.reportStatus == 1"
				:detalisData="{...detalisData.verifyInfos,reportStatus:detalisData.reportStatus}"
				:detalisList="
					formList.map((item) => {
						return {
							label: item.label,
							field: item.prop,
							slot: item.prop == 'verifierStatus',
						};
					})
				"
			>
				<template #data="{ data }">
					<view :class="{ red: data.data == 1, green: data.data == 2, blue: data.data == 3 }" class="state_view">
						<view class="drop"></view>
						<view class="state font28">{{ formList.find((item) => item.prop == data.field).columns.find((i) => i.value == data.data).name == '上报'
										? '已上报'
										: formList.find((item) => item.prop == data.field).columns.find((i) => i.value == data.data).name}}</view>
					</view>
				</template>
			</Details>
			<ButtonFc :detalisData="detalisData" @shangbao="shangbao" @edit="edit" @deleteItem="(deleteShow = true), (deleteId = detalisData.id)"></ButtonFc>
		</view>
		<SubmitState v-if="isEnter" :success="success" @successReturn="fanhui" @failReturn="isEnter = false"></SubmitState>
		<DeleteState v-if="isDelete" :success="success1" @successReturn="fanhui" @failReturn="isDelete = false"></DeleteState>
	</view>
	<DeleteModal :deleteShow="deleteShow" @confirm="confirm" @close="deleteShow = false"></DeleteModal>
</template>
<script setup>
import Details from 'com/Details.vue';
import Form from 'com/Form.vue';
import dayjs from 'dayjs';
import ButtonFc from 'com/ButtonFc.vue';
import DeleteModal from 'com/modal/DeleteModal.vue';
import DeleteState from 'com/modal/DeleteState.vue';
import SubmitState from 'com/modal/SubmitState.vue';
import { useDetails } from 'hooks';
const init = async (currentPage) => {
	const res = await api.queryById('baseHouseInfo',currentPage.options);
	if (!res.verifyInfos && !res.reportStatus) {
		res.verifyInfos = detalisData.value.verifyInfos;
		uni.setNavigationBarTitle({
			title: '上报核查结果'
		});
	} else {
		uni.setNavigationBarTitle({
			title: '实有房屋详情'
		});
	}
	detalisData.value = res;
};
const { store,api, fanhui, edit } = useDetails(init, 'house')
const detalisData = ref({
	verifyInfos: {
		verifierName: store.users.username,
		verifierUnit: store.users.workAddress,
		verifierDate: dayjs().format('YYYY-MM-DD HH:mm'),
		verifierPhone: store.users.phone,
		verifierStatus: '',
		situationDescription: ''
	}
});
const deleteShow = ref(false);
const deleteId = ref('');
const isEnter = ref(false);
const isDelete = ref(false);
const success = ref('');
const success1 = ref('');
const formRef = ref();
const shangbao = () => {
	formRef.value.submit(async () => {
		const res = await api.report('baseHouseInfo', {
			...detalisData.value.verifyInfos,
			eventId: detalisData.value.id
		});
		isEnter.value = true;
		success.value = res;
	});
};
const confirm = async () => {
	deleteShow.value = false;
	const res = await api.deleteData('baseHouseInfo', { id: deleteId.value });
	isDelete.value = true;
	success1.value = res;
};
const formList = [
	{
		label: '核查人姓名',
		prop: 'verifierName',
		type: 'text',
		placeholder: '请输入核查人姓名',
		rules: [
			{
				required: true,
				message: '请输入核查人姓名',
				trigger: ['change', ['change', 'blur']]
			}
		]
	},
	{
		label: '工作单位',
		prop: 'verifierUnit',
		type: 'text',
		placeholder: '请输入工作单位',
		rules: [
			{
				required: true,
				message: '请输入工作单位',
				trigger: ['change', 'blur']
			}
		]
	},
	{
		label: '联系方式',
		prop: 'verifierPhone',
		type: 'text',
		placeholder: '请输入联系方式',
		rules: [
			{
				required: true,
				message: '请输入联系方式',
				trigger: ['change', 'blur']
			}
		]
	},
	{
		label: '时间',
		prop: 'verifierDate',
		type: 'datetime',
		placeholder: '请选择时间',
		mode: 'datetime',
		format: 'YYYY-MM-DD HH:mm',
		rules: [
			{
				required: true,
				message: '请选择时间',
				trigger: ['change', 'blur']
			}
		]
	},
	{
		label: '核查状态',
		prop: 'verifierStatus',
		type: 'popup',
		placeholder: '请选择核查状态',
		rules: [
			{
				required: true,
				message: '请选择核查状态',
				trigger: ['change', 'blur'],
				transform(value) {
					return String(value);
				}
			}
		],
		columns: [
			{
				name: '已核查',
				value: 2
			},
			{
				name: '上报',
				value: 3
			}
		]
	},
	{
		label: '情况描述（选填）',
		prop: 'situationDescription',
		type: 'textarea',
		placeholder: '请输入内容'
	}
];
const detalisList = [
	{
		label: 'tittle',
		field: 'name'
	},
	{
		label: '房屋类别',
		field: 'houseType_dictText'
	},
	{
		label: '房屋性质',
		field: 'houseProperty_dictText'
	},
	{
		label: '房屋用途',
		field: 'housePurpose_dictText'
	},
	{
		label: '房屋结构',
		field: 'houseBuild'
	},
	{
		label: '房屋面积',
		field: 'houseArea'
	},
	{
		label: '所在地区',
		field: 'province'
	},
	{
		label: '详细地址',
		field: 'place'
	},
	{
		label: '不动产权证书编号',
		field: 'realEstateNum'
	}
];
const detalisList1 = [
	{
		label: '姓名',
		field: 'houseName',
		encryption: true
	},
	{
		label: '外文名',
		field: 'foreignName',
		encryption: true
	},
	{
		label: '外文姓',
		field: 'foreignSurname',
		encryption: true
	},
	{
		label: '证件类型',
		field: 'cardType_dictText'
	},
	{
		label: '证件号码',
		field: 'card',
		encryption: true
	},
	{
		label: '联系电话',
		field: 'phone',
		encryption: true
	}
];
const detalisList3 = [
	{
		label: '姓名',
		field: 'custodianName',
		encryption: true
	},
	{
		label: '外文名',
		field: 'custodianForeignName',
		encryption: true
	},
	{
		label: '外文姓',
		field: 'custodianForeignSurname',
		encryption: true
	},
	{
		label: '证件类型',
		field: 'custodianCardType_dictText'
	},
	{
		label: '证件号码',
		field: 'custodianCard',
		encryption: true
	},
	{
		label: '联系电话',
		field: 'custodianPhone',
		encryption: true
	},
	{
		label: '与房主关系',
		field: 'relationship'
	}
];
const detalisList2 = [
	{
		label: '核查人姓名',
		field: 'verifierName'
	},
	{
		label: '工作单位',
		field: 'verifierUnit'
	},
	{
		label: '联系方式',
		field: 'verifierPhone',
		encryption: true
	},
	{
		label: '时间',
		field: 'verifierDate'
	},
	{
		label: '核查状态',
		field: 'verifierStatus'
	},
	{
		label: '情况描述',
		field: 'situationDescription'
	}
];
</script>

<style lang="scss" scoped>
.details {
	min-height: 100vh;
}

.btn_blue {
	height: 96rpx;
	background: #458cff;
	border-radius: 16rpx;
	color: #ffffff;
	text-align: center;
	line-height: 96rpx;
	margin: 0 32rpx;
}

.btn_zuhe {
	display: flex;

	.enit {
		margin-right: 16rpx;
		width: 100%;
	}

	.delete {
		width: 124rpx;
		height: 96rpx;
		background: #ffffff;
		border-radius: 16rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		margin-right: 32rpx;
	}
}
</style>
